<template>
  <div class="recordDetail">
    <div class="recordTitle">订单详情</div>
    <div class="recordListed">
      <ul>
        <li class="displayFlex" v-for="lotteryTabItem in orderDetailData">
          <p>{{lotteryTabItem.name}}</p>
          <p>{{lotteryTabItem.value}}</p>
        </li>
      </ul>
    </div>
    <div class="recordTitle">投注内容</div>
    <div class="recordNumber">
      <p>
        {{betNumberJSON}}
      </p>
    </div>
    <div class="recordTitle">开奖结果</div>
    <div class="recordKJ">
      <div class="recordKJNumber displayFlex">
        <div class="recordKJTopLeft">
          <section>
            <p>{{lotteryName}}</p>
            <p>第<span>{{actionNo}}</span>期 开奖结果号码</p>
          </section>
          <!--大转盘-->
          <section class="recordRedSection" :class="{'recordNodOpen': startlottoNum[0] === '?'}" v-if="differentAwards.bigWheel">
            <p :class="{red:lotteryNumColor[startlottoNum[0]]==='red',black:lotteryNumColor[startlottoNum[0]]==='black',gray:lotteryNumColor[startlottoNum[0]]==='gray'}">
              {{startlottoNum[0]}}</p>
          </section>
          <!--百家乐-->
          <section class="recordRedSection reccordBaccarat" v-if="differentAwards.baccarat">
            <div class="recBAccItem">
              <img :src="bankerIcon" alt="">
              <img :src="_Modulation.getSmallCard('heart',resItem?resItem:'?')" alt="" v-for="(resItem,resIndex) in startlottoNum"
                   v-if="resIndex<2">
            </div>
            <div class="recBAccItem">
              <img :src="_Modulation.getSmallCard('heart',resItem?resItem:'?')" alt="" v-for="(resItem,resIndex) in startlottoNum"
                   v-if="resIndex>1">
              <img :src="idleIcon" alt="">
            </div>
          </section>
          <!--重庆时时彩-->
          <section class="recordRedSection"
                   v-if="differentAwards.choose || differentAwards.BJpk10 || differentAwards.BJHappy8"
                   :class="{'recordNodOpen': startlottoNum[0] === '?', 'difBJ10': differentAwards.BJpk10}">
            <p v-for="(numItem,numIndex) in startlottoNum">{{numItem}}</p>
          </section>
          <!--pc蛋蛋-->
          <section class="recordRedSection reccordPcVery" v-if="differentAwards.pcVery"
                   :class="{'recordNodOpen': startlottoNum[0] === '?'}">
            <p v-for="(numItem,numIndex) in startlottoNum">{{numItem}}</p>
            <p :class="{red:lotteryNumColor[_Util.sumNum(startlottoNum)]==='red',green:lotteryNumColor[_Util.sumNum(startlottoNum)]==='green',blue:lotteryNumColor[_Util.sumNum(startlottoNum)]==='blue',gray:lotteryNumColor[_Util.sumNum(startlottoNum)]==='gray'}">
              {{_Util.sumNum(startlottoNum)}}</p>
          </section>
          <!--快乐六合彩-->
          <section class="recordRedSection recordHapy" v-if="differentAwards.happy"
                   :class="{'recordNodOpen': startlottoNum[0] === '?'}">
            <p v-for="(numItem,numIndex) in startlottoNum"
               :class="{red:lotteryNumColor[parseInt(numItem)]==='red',green:lotteryNumColor[parseInt(numItem)]==='green',blue:lotteryNumColor[parseInt(numItem)]==='blue',gray:lotteryNumColor[parseInt(numItem)]==='gray'}">
              <span>{{numItem}}</span>
              <span class="zodiac">{{animal[numIndex]}}</span>
            </p>
          </section>
          <!--江苏快三-->
          <section class="recordRedSection" v-if="differentAwards.fastT"
                   :class="{'recordNodOpen': startlottoNum[0] === '?'}">
            <p v-for="(numItem,numIndex) in startlottoNum" v-if="startlottoNum[0] === '?'">{{numItem}}</p>
            <p v-for="differNum in differentKJData" class="differImg"><img :src="differNum" alt=""></p>
          </section>
        </div>
        <div class="recordKJTopBtn">
          <section>
            <p v-if="parseInt(status) === 4">已中奖，赢{{profit}}元</p>
            <p class="greyFontColor" v-else>{{statusText}}</p>
          </section>
        </div>
      </div>
      <div class="recordBottomB" v-if="lotteryResultData.length>0">
        <!--{{lotteryResultData}}-->
        <div class="lotteryR displayFlex">
          <section v-for="result in lotteryResultData">
            <p>{{result.name}}</p>
            <p>{{result.value}}</p>
          </section>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import './recordDetail.scss';
  import allLotteryNumColor from '../../theColor/color/data/lottery_num_color.json';
  import {mapState} from 'vuex';
  
  export default {
    data() {
      return {
        lotteryIcon: '',
        bankerIcon: require('../../../assets/images/theColor/baccarat/icon/banker.png'),
        idleIcon: require('../../../assets/images/theColor/baccarat/icon/idle.png'),
        orderDetailData: [
          {name: '订单号', value: ''},
          {name: '模式/倍数', value: ''},
          {name: '用户', value: ''},
          {name: '单注金额', value: ''},
          {name: '彩种', value: ''},
          {name: '注数/总额', value: ''},
          {name: '期号', value: ''},
          {name: '赔率/返点', value: ''},
          {name: '下注时间', value: ''},
          {name: '投注返点', value: ''},
          {name: '玩法', value: ''},
          {name: '中奖金额', value: ''},
          {name: '状态', value: ''},
          {name: '盈亏', value: ''},
        ],//订单详情数据
        orderNumber: '',//订单编号
        lotteryCode: '001',//彩种code
        actionNo: '',//期号
        profit: '',//赢的钱
        lotteryName: '',//彩种名
        status: '',//开奖状态
        statusText: '',//开奖状态文字
        startlottoNum: [],//开奖结果---号码
        witchColor: [],//开奖结果---球号颜色
        animal: [],//开奖结果---动物
        lotteryResultData: [],//开奖结果---表格
        lotteryNumColor: {},//彩种球号颜色
        isShowResult: false,//是否显示开奖结果
        betNumberJSON: '', //投注号码
        differentAwards: '', //判定结果
        differentKJData: [], //江苏快三开奖结果
        recordName: '',
      }
    },
    computed: {
      ...mapState({
        userInformation: state => state.mutations.userInformation,
      }),
    },
    mounted() {
    },
    activated() {
      this.init();
    },
    deactivated() {
      //清除数据
      this.clearOrderDetail();
    },
    methods: {
      init() {
        let that = this;
        that.lookOrderDetail();
        that.orderNameEvent();
      },
      //获取用户名
      orderNameEvent() {
        if (!this.userInformation.memberInfo) return;
        this.recordName = this.userInformation.memberInfo.username;
//        this.lookOrderDetail();
      },
      //查看订单详情
      lookOrderDetail() {
        let that = this;
        let params = {
          orderId: that.$route.query.orderId,
        };
        that.isShowOrderDetail = true;
        that._Util.post(that, that._Api.POST_LOTTERY_ORDER_DETAIL_DATA, params, (data) => {
          let detailData = data;
          that.lotteryCode = detailData.lotteryCode || '';
          that.differentAwards = that._Modulation.differentAwards(that.lotteryCode);
          that.lotteryIcon = detailData.lotteryIcon || '';
          that.orderNumber = detailData.orderId || '';
          that.lotteryName = detailData.lotteryName || '';
          that.actionNo = detailData.actionNo || '';
          that.profit = detailData.bonus || '0';
          that.status = detailData.status || '';
          that.statusText = detailData.statusText || '';
          detailData.multiple = detailData.multiple ? detailData.multiple : '1';
          that.isShowResult = detailData.lotteryNo ? true : false;
          //获取开奖球号及色波
          let pcVery = that.differentAwards.pcVery,
            choose = that.differentAwards.choose,
            happy = that.differentAwards.happy,
            fastT = that.differentAwards.fastT,
            BJpk10 = that.differentAwards.BJpk10,
          baccarat = that.differentAwards.baccarat,
          bigWheel = that.differentAwards.bigWheel;
          let k = 0,
            arr = [], arr1 = [];
          if (pcVery || fastT) {
            k = 3;
          }
          if (choose) {
            k = 5;
          }
          if (happy) {
            k = 7;
          }
          if (BJpk10) {
            k = 10;
          }
          if (baccarat) {
            k = 4;
          }
          if (bigWheel) {
            k = 1;
          }
          for (let i = 0; i < k; i++) {
            arr.push('?');
            arr1.push('');
          }
          that.startlottoNum = detailData.lotteryNo ? detailData.lotteryNo.split(',') : arr;
          if (that.differentAwards.fastT) {
            let arrImg = [],
              str = '';
            that.startlottoNum.forEach((v, i) => {
              if (v === '?') return;
              str = require('../../../assets/images/theColor/dice/dice' + parseInt(v) + '.png');
              arrImg.push(str);
            });
            that.differentKJData = arrImg;
          }
          if (that.startlottoNum.length == 5 && that.startlottoNum[0] == '?') {
            that.witchColor = ['gray', 'gray', 'gray', 'gray', 'gray'];
            that.lotteryNumColor = {'?': 'gray'};
          } else {
            //球号颜色
            that.lotteryNumColor = allLotteryNumColor[0][that._Modulation.getLocalDataEvent(that.lotteryCode)] ? allLotteryNumColor[0][that._Modulation.getLocalDataEvent(that.lotteryCode)].color : {};
            //开奖结果---动物
            that.animal = detailData.animals ? detailData.animals.split(',') : arr1;
          }
          
          //获取开奖表格数据
          that.lotteryResultData = that.groupResultTab(detailData.kjResult || [[], []]);
          that.orderDetailData = [
            {name: '订单号', value: that.orderNumber || ''},
            {
              name: '模式/倍数',
              value: (detailData.amount || '0') / (detailData.multiple || '1') / (detailData.actionNum || '1') + '元 / ' + detailData.multiple + '倍' || ''
            },
            {name: '用户', value: that.recordName || ''},
            {
              name: '单注金额',
              value: (detailData.amount || '0') / (detailData.multiple || '1') / (detailData.actionNum || '1') + '元' || ''
            },
            {name: '彩种', value: detailData.lotteryName},
            {name: '注数/总额', value: detailData.actionNum + '注 / ' + detailData.amount + '元' || ''},
            {name: '期号', value: detailData.actionNo || ''},
            {name: '赔率/返点', value: detailData.odds + '/' + detailData.rebate + '%' || '0/0%'},
            {name: '下注时间', value: that._Util.formatDateTime(detailData.actionTime, 1) || ''},
            {name: '投注返点', value: detailData.rebateAmount + '元' || '0.00元'},
            {name: '玩法', value: (detailData.playedGroupName || '') + '-' + (detailData.playedName || '')},
            {name: '中奖金额', value: (detailData.bonus || '0') + '元'},
            {name: '状态', value: detailData.statusText || ''},
            {name: '盈亏', value: (detailData.profitAndLoss || '0') + '元'},
          ];
          that.betNumberJSON = detailData.actionData || '';
        })
      },
      //清除订单详情数据
      clearOrderDetail() {
        let that = this;
        that.lotteryCode = '';
        that.lotteryIcon = '';
        that.orderNumber = '';
        that.lotteryName = '';
        that.actionNo = '';
        that.profit = '0';
        that.status = '';
        that.statusText = '';
        that.startlottoNum = [];
//        that.witchColor = [];
        that.animal = ['', '', '', '', ''];
        that.lotteryResultData = [];
        that.orderDetailData = [
          {name: '订单号', value: ''},
          {name: '模式/倍数', value: ''},
          {name: '用户', value: ''},
          {name: '单注金额', value: ''},
          {name: '彩种', value: ''},
          {name: '注数/总额', value: ''},
          {name: '期号', value: ''},
          {name: '赔率/返点', value: ''},
          {name: '下注时间', value: ''},
          {name: '投注返点', value: ''},
          {name: '玩法', value: ''},
          {name: '中奖金额', value: ''},
          {name: '状态', value: ''},
          {name: '盈亏', value: ''},
        ];
        that.betNumberJSON = '';
      },
      //组合表格开奖结果
      groupResultTab(data) {
        let result = [];
        data[0].forEach((v, i) => {
          result.push({name: v, value: data[1][i] || '-'});
        });
        return result;
      },
      //复制订单号
      onCopy: function (e) {
        this._Util.showAlert('订单号复制成功');
      },
      //复制出错
      onError: function (e) {
        this._Util.showAlert('订单号未复制失败')
      },
    },
    components: {},
    watch: {
      'userInformation'() {
        this.orderNameEvent();
      }
    }
  }
</script>
